<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New ThinkJS Application</title>
<style>
*{padding: 0;margin: 0;font-size: 16px;line-height: 20px;font-family: arial;}
a, a:visited{color:#337ab7;text-decoration: none;}
header{padding: 70px 0 70px 0;background-color: #4A6495}
h1{font-size: 36px;color:#fff;font-weight: normal;}
code{  padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;}
.content{width: 1000px;margin: auto}
.wrap{width: 1000px;margin: auto}
.content{margin-top: 80px;}
.list{width: 800px;}
.list .item{position: relative;padding-left: 70px;margin-top: 50px;}
.list .item .step{position: absolute;width: 36px;height: 36px;top:-3px;left:0;border: 5px solid #4A6495;border-radius: 23px;text-align: center;line-height: 36px;}
.list .item h2{font-size: 24px;font-weight: normal;}
.list .item p{line-height: 30px;margin-top: 10px}
</style>
</head>
<body>
  <div class="content">
    <ul id="ul">
      <li><a id="tianjing">天境</a></li>
      <li><a id="jiaoyu">川航</a></li>
    </ul>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="http://lib.baomitu.com/socket.io/2.0.1/socket.io.js"></script>

  <script>
    const domain = 'http://localhost:8360';
    const urls = [
        "http://meteorology-industry-dev.tianjishuju.com/static/big_screen/index.production.html?id=f1d8c050-6b06-11e8-99bc-e7644f657a4b",
        "http://sichuanair-dev.tianjishuju.com/static/big_screen/index.production.html?id=1d1528b0-3d64-11e8-bff8-bb2feb35c02e"
    ]

    var socket = io(domain);

    $('#tianjing').on('click', function(evt) {
        socket.emit('change', urls[0]);
    });

    $('#jiaoyu').on('click', function(evt) {
        socket.emit('change', urls[1]);
    });
  </script>
</body>
</html>
